<template>
  <div class='container'>
    <Search
    :Name="getname"
    :dataObj="dataObj"
    @addCatalog="addCatalog"
    :showBack="showBack"
    ></Search>

    <Table :columns="columns" :data="dataObj.items" size="large">
   <template slot="action" slot-scope="{row}">
            <Button type="text" size="small" style="margin-right: 5px;color:#6baaff" @click="isForbidden(row)">
              {{row.state === '启用'? '启用':'禁用'}}
            </Button>
            <Button :disabled="row.state ==='禁用'" type="text" size="small" style="margin-right: 5px;" @click="updateLabel(row)">修改</Button>
            <Button :disabled="row.state ==='禁用'" type="text" size="small" style="margin-right: 5px;" @click="delLabel(row.id)
 ">删除</Button>
    </template>
    </Table>

  <Page
  :total="dataObj.counts"
  show-elevator
  show-sizer
  class-name="right"
  @on-page-size-change="changePage"
  @on-change="change"
  >
  </Page>

  <Modal
  v-model="modal"
  :title="showTitle"
  width="400px"
  @on-ok = "ok"
  @on-cancel="cancel"
  >
   <Form>
          <FormItem>
            <span class="san">所属学院</span>
              <Select style="width:200px" v-model="subjectID">
               <Option :value="obj.subjectID" :label="obj.subjectName" v-for="obj in dataObj.items" :key="obj.id"></Option>
              </Select>
          </FormItem>
          <FormItem>
              <span class="san">目录名称</span>
              <Input style="width:200px" v-model="val"></Input>
          </FormItem>
        </Form>
  </Modal>
  </div>
</template>

<script>
import Search from '../components/search.vue'
import { list, remove, detail, update, add, changeState } from '@/api/hmmm/tags.js'
import { filterDate } from '@/filters'
export default {
  components: {
    Search
  },
  data () {
    return {
      getname: '标签名称',
      showBack: false,
      page: {
        page: 1,
        pagesize: 10
      },
      dataObj: {},
      totalPage: {
        pagesize: 100
      },
      totalObj: {},
      columns: [
        { title: '序号', type: 'index', fixed: 'left' },
        { title: '所属学科', key: 'subjectName', fixed: 'left' },
        { title: '标签名称', key: 'tagName', fixed: 'left' },
        { title: '创建者', key: 'username', fixed: 'left' },
        { title: '创建日期', key: 'addDate', fixed: 'left' },
        { title: '状态', key: 'state', fixed: 'left' },
        { title: '操作', slot: 'action', width: '300px', fixed: 'left' }
      ],
      modal: false,
      subjectID: '',
      val: '',
      isID: false,
      ID: '',
      toName: this.$route.params.subjectName,
      toID: this.$route.params.id
    }
  },
  computed: {
    showTitle () {
      return this.isID ? '修改标签' : '添加标签'
    }
  },
  methods: {
    async getList () {
      const res = await list(this.page)
      if (this.toName) {
        this.showBack = true
        this.dataObj.items = res.data.items.filter(item => {
          return item.subjectName === this.toName
        })
      } else {
        this.dataObj = res.data
      }
      const result = await list(this.totalPage)
      this.totalObj = result.data
      this.dataObj.items.forEach(item => {
        item.addDate = filterDate(item.addDate)
        item.state = item.state === 0 ? '禁用' : '启用'
      })
    },
    changePage (page) {
      this.page.pagesize = page
      this.getList()
    },
    change (newpage) {
      this.page.page = newpage
      this.getList()
    },
    addCatalog () {
      this.modal = true
    },
    async delLabel (id) {
      await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      this.dataObj.id = id
      await remove(this.dataObj)
      this.getList()
      this.$message.success('删除成功')
    },
    async updateLabel (row) {
      this.modal = true
      this.isID = true
      this.ID = row.id
      const res = await detail(row)
      this.subjectID = res.data.subjectID
      this.val = res.data.tagName
    },
    async ok () {
      if (this.isID) {
        await update({ id: this.ID, subjectID: this.subjectID, tagName: this.val })
        this.$message.success('修改成功')
      } else {
        await add({ subjectID: this.subjectID, tagName: this.val })
        this.$message.success('添加成功')
      }
      this.getList()
      this.subjectID = ''
      this.val = ''
    },
    cancel () {
      this.subjectID = ''
      this.val = ''
    },
    async isForbidden (row) {
      await changeState({ id: row.id, state: row.state === '启用' ? 0 : 1 })
      this.getList()
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped lang='less'></style>
